<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="/" style="font-size:32px;">Health-互联网医药平台</a></div>
        </div>
    </div>
</nav>

<div class="container">

    <form id="form1" onsubmit="return false" action="#" method="post" class="form-signin" role="form">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入注册账号" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="password" class="form-control" id="password" name="password" placeholder="请输入注册密码"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="password" class="form-control" id="repassword" name="repassword" placeholder="请再次输入密码"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span><span  style="color: #d43f3a;display: none" id="repass" th:text="${'两次密码不一致'}"/>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="telphone" name="telphone" placeholder="请输入电话号码"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-phone-alt form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="address" name="address" placeholder="请输入家庭地址"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-home form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="checkbox">
            <label>

            </label>
            <label style="float:right">
                <a href="/default/log">我有账号</a>
            </label>
        </div>
        <input  class="btn btn-lg btn-success btn-block" type="submit" onclick="regist()" value="注册"/>
    </form>
</div>
<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</body>
<script>
    $(function () {
        $('input').focus(function () {
            $('input').css("border-color", "#3c763d");
        });
        $('#form1').click(function panduan() {
            if ($("#userName").val() == "" ) {
                $("#userName").css("border-color", "red");
                $('#userName').attr("placeholder", "用户名不能为空");
                return false;
            }
            if ($("#password").val() == "") {
                $("#password").css("border-color", "red");
                $('#password').attr("placeholder", "密码不能为空");
                return false;
            }
            if ($("#repassword").val() == "") {
                $("#repassword").css("border-color", "red");
                $('#repassword').attr("placeholder", "密码不能为空");
                return false;
            }else {
                if ($("#repassword").val() != $("#password").val()) {
                    $("#repass").css("display","");
                    $("#repassword").css("border-color", "red");
                    return false;
                }else {
                    $("#repass").css("display","none");
                    $('input').css("border-color", "#3c763d");
                }
            }
            if ($("#telphone").val() == "" ) {
                $("#telphone").css("border-color", "red");
                $('#telphone').attr("placeholder", "电话不能为空");
                return false;
            }
            if ($("#address").val() == "") {
                $("#address").css("border-color", "red");
                $('#address').attr("placeholder", "地址不能为空");
                return false;
            }
            if ($("#email").val() == "" ) {
                $("#email").css("border-color", "red");
                $("#email").css("placeholder", "邮箱不能为空");
                return false;
            }



        })
    });
    //注册
    function regist() {
        $.ajax({
            url: "/user/reg",
            type: "POST",
            dataType: "json",
            data: $("#form1").serialize(),
            success: function (status, response) {
                console.log(response == 'success')
                if (response == 'success') {
                    alert("注册成功，返回登陆页"),
                        window.location.href = "/default/log"
                }
            },
            error: function () {
                alert("用户名已存在，请重新输入")
                location.replace(location.href)
            }
        })
    }

</script>
</html>